<template>
  <div class="app-container">
    <el-card class="box-card">
      <div style="margin-bottom: 20px">
        <el-tag type="success">
          <span style="margin: 5px;font-size: 20px;font-weight: bold">我的工资</span>
        </el-tag>
        <el-button @click="drawer = true" type="primary" style="margin-right: 30px;float: right">
          查看历史工资明细
        </el-button>
      </div>

      <el-form ref="salaryForm" :model="salary" label-width="100px" inline label-position="left" style="margin-left: 80px">
        <el-form-item label="名字" style="width: 40%">
          <span style="font-size: 15px;font-weight: bold">{{ salary.name }}</span>
        </el-form-item>
        <el-form-item label="基本工资" style="width: 40%">
          <span style="font-size: 15px;font-weight: bold">{{ salary.basicSalary }}(元)</span>
        </el-form-item>
        <el-form-item label="奖金" style="width: 40%">
          <span style="font-size: 15px;font-weight: bold">{{ salary.bonus }}(元)</span>
        </el-form-item>
        <el-form-item label="交通补助" style="width: 40%">
          <span style="font-size: 15px;font-weight: bold">{{ salary.trafficSalary }}(元)</span>
        </el-form-item>
        <el-form-item label="养老金基数" style="width: 40%">
          <span style="font-size: 15px;font-weight: bold">{{ salary.pensionBase }}(元)</span>
        </el-form-item>
        <el-form-item label="养老金比率" style="width: 40%">
          <span style="font-size: 15px;font-weight: bold">{{ salary.pensionPercentage }}(%)</span>
        </el-form-item>
        <el-form-item label="医疗基数" style="width: 40%">
          <span style="font-size: 15px;font-weight: bold">{{ salary.medicalBase }}(元)</span>
        </el-form-item>
        <el-form-item label="医疗保险比率" style="width: 40%">
          <span style="font-size: 15px;font-weight: bold">{{ salary.medicalPercentage }}(%)</span>
        </el-form-item>
        <el-form-item label="公积金基数" style="width: 40%">
          <span style="font-size: 15px;font-weight: bold">{{ salary.accumulationFundBase }}(元)</span>
        </el-form-item>
        <el-form-item label="公积金比率" style="width: 40%">
          <span style="font-size: 15px;font-weight: bold">{{ salary.accumulationFundPercentage }}(%)</span>
        </el-form-item>
        <el-form-item label="个人所得税" style="width: 40%">
          <span style="font-size: 15px;font-weight: bold">{{ salary.individualTax }}(元)</span>
        </el-form-item>
      </el-form>
    </el-card>

    <el-drawer
      title="历史记录"
      :visible.sync="drawer"
      :direction="direction"
      size="70%">
      <el-table :data="salaryList" style="width: 100%;margin-top:30px;" border>
        <el-table-column type="expand">
          <template #default="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="名字"><span>{{ props.row.name }}</span></el-form-item>
              <el-form-item label="基本工资"><span>{{ props.row.basicSalary }} 元</span></el-form-item>
              <el-form-item label="奖金"><span>{{ props.row.bonus }} 元</span></el-form-item>
              <el-form-item label="工时"><span>{{ props.row.workTime }} 小时</span></el-form-item>
              <el-form-item label="缺勤时间"><span>{{ props.row.absenceDay }} 小时</span></el-form-item>
              <el-form-item label="午餐补助"><span>{{ props.row.lunchSalary }} 元</span></el-form-item>
              <el-form-item label="交通补助"><span>{{ props.row.trafficSalary }} 元</span></el-form-item>
              <el-form-item label="养老金基数"><span>{{ props.row.pensionBase }} 元</span></el-form-item>
              <el-form-item label="养老金比率"><span>{{ props.row.pensionPercentage }} %</span></el-form-item>
              <el-form-item label="医疗基数"><span>{{ props.row.medicalBase }} 元</span></el-form-item>
              <el-form-item label="医疗保险比率"><span>{{ props.row.medicalPercentage }} %</span></el-form-item>
              <el-form-item label="公积金基数"><span>{{ props.row.accumulationFundBase }} 元</span></el-form-item>
              <el-form-item label="公积金比率"><span>{{ props.row.accumulationFundPercentage }} %</span></el-form-item>
              <el-form-item label="个人所得税"><span>{{ props.row.individualTax }} 元</span></el-form-item>
              <el-form-item label="最终工资"><span>{{ props.row.finalSalary }} 元</span></el-form-item>
              <el-form-item label="工资日期"><span> <el-date-picker readonly v-model="props.row.salaryTime" type="date" placeholder="工资日期"></el-date-picker></span></el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="名字"></el-table-column>
        <el-table-column align="center" prop="basicSalary" label="基本工资"></el-table-column>
        <el-table-column align="center" prop="workTime" label="工时"></el-table-column>
        <el-table-column align="center" prop="absenceDay" label="缺勤天数"></el-table-column>
        <el-table-column align="center" prop="finalSalary" label="最终薪资"></el-table-column>
      </el-table>
    </el-drawer>
  </div>

</template>

<script>
import { getMySalary, getSalaryLog } from '@/api/salary'

export default {
  name: 'SalaryMine',
  comments: {},
  created() {
    // Mock: get all routes and users list from server
    this.getMySalary()
    this.getSalaryLog()

    this.$notify.info({
      title: '提示',
      message: '工资结算日期具体而定',
      duration: 0
    });
  },
  data() {
    return {
      salary: [],
      drawer: false,
      direction: 'rtl',
      salaryList: []
    }
  },
  methods: {
    async getMySalary() {
      const res = await getMySalary()
      this.salary = res.data
    },
    async getSalaryLog() {
      await getSalaryLog().then((res)=>{
        this.salaryList = res.data
      })
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 100%;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
